<template>
	<view class="userDetail">
		<!-- 该页面为其他用户资料详情页 -->
		<!-- 背景封面区域 -->
		<view class="bgCoverImg"><image></image></view>
		
		<!-- 资料详情展示区域 -->
		<view class="infoDetail">
			<!-- 主要资料展示	 -->
			<view class="mainDetail">
				<image></image>
				<view class="accountDetail">
					<view>姓名</view>
					<view class="account-id">id <u-icon name="woman" color="pink"></u-icon><u-icon name="man" color="blue"></u-icon></view>
				</view>
			</view>
				<!-- 其他资料展示 -->
				<view class="elsDetail">
					<u-cell-group :border="false">
						<u-cell icon="account" :border="false">
							<view slot="title" class="cell-item">
								5岁
							</view>
						</u-cell>
						<u-cell icon="info"  :border="false">
							<view slot="title" class="cell-item">个人介绍</view>
						</u-cell>
					</u-cell-group>
				</view>
		</view>
	
		<!-- 功能按钮区域 -->
		<view class="function-btn">
			<u-button type="success" text="添加" class="btn"></u-button>
			<u-button type="error" text="删除" class="btn"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	.userDetail{
		position: relative;
	}
.bgCoverImg{
	height: 25vh;
	width: 100vw;
	border: 1px solid red;
	background-color: green;
	image{
		width: 100%;
		height: 100%;
	}
}
.infoDetail{
	width: 100vw;
	height: 68vh;
	border: 1px solid yellow;
}
.mainDetail{
	width: 100vw;
	height: 170rpx;
	border: 1px solid red;
	position: absolute;
	transform: translateY(-85rpx);
	display: flex;
	align-items: center;
	justify-content: space-around;
	image{
		width: 150rpx;
		height: 150rpx;
		border: 1px solid black;
		border-radius: 50%;
	}
	.accountDetail{
		width: calc(100vw - 250rpx);
		height: 100%;
		border: 1px solid black;
		view{
			width: 100%;
			height: 50%;
			line-height: 85rpx;
		}
		.account-id{
			display: flex;
			align-items: center;
		}
	}
}
.elsDetail{
	margin-top: 85rpx;
	maxheight: 700rpx;

}
.cell-item{
	margin-left: 20rpx;
}
.function-btn{
	width: 100vw;
	height: 120rpx;
	background-color: #DEDEDE;
	position: fixed;
	bottom: 0;
	display: flex;
	align-items: center;
	.btn{
		width: 200rpx;
	}
}
</style>
